<template>
  <div class="categoryDetails">
    <div class="back">
      <router-link to="/category">
        <img src="../assets/houtui.png" alt="" />
      </router-link>
      <div class="title">{{ text }}</div>
    </div>
    <div class="detailsCon">
      <div class="majType">
        <ul>
          <li
            v-for="(item, index) in majArray"
            :key="index"
            @click="majActive(index, item)"
            :class="majIndex == index ? 'red' : ''"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="minType">
        <ul>
          <li
            v-for="(item, index) in minType.mins"
            :key="index"
            @click="minActive(index, item)"
            :class="minIndex == index ? 'red' : ''"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <div class="newAll" v-for="(item, index) in AllList" :key="index">
      <div class="newItem">
        <router-link :to="`/bookDetails/${item._id}`">
          <div class="itemleft">
            <img
              :src="'http://statics.zhuishushenqi.com' + item.cover"
              alt=""
            />
          </div>
          <div class="itemright">
            <div class="itemname">{{ item.title }}</div>
            <div class="synopsis">
              {{ item.shortIntro }}
            </div>
            <div class="bom">
              <div class="bom_left">
                <img src="../assets/zz.png" alt="" />
                <div class="author">{{ item.author }}</div>
                <!-- 言归正传 -->
              </div>
              <div class="bom_right">
                <span class="type">{{ item.cat }}</span>
                <span class="isOk">{{
                  item.isSerial ? "连载中" : "完结"
                }}</span>
                <span class="textNum">{{ item.retentionRatio }}万字</span>
              </div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div class="loadingCss" v-show="isLoading">
      <div id="preloader_6">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      text: String,
    },
  },
  data() {
    return {
      minType: [],
      majArray: ["最新", "热门", "完结"],
      majEnglish: ["new", "hot", "over"],
      majIndex: 0,
      minIndex: 0,
      majText: "",
      minText: "",
      sex: "",
      AllList: [],
      isLoading: true,
    };
  },
  created() {
    // 有一个问题  有一些接口是没有数据的  所以要加提示

    // 主分类
    this.$axios.get("/sub-categories").then((d) => {
      console.log(d);
      let _this = this;
      //男生
      if (_this.$route.query.sex == "man") {
        d.data.male.forEach(function (item) {
          if (item.major == _this.text) {
            _this.minType = item;
            _this.changeText();
            _this.minText = item.mins[0];
            _this.sex = "male";
            _this.changeType(_this.sex, _this.majText, _this.minText);
          }
        });
      } else {
        d.data.female.forEach(function (item) {
          if (item.major == _this.text) {
            _this.minType = item;
            _this.changeText();
            _this.minText = item.mins[0];
            _this.sex = "female";
            _this.changeType(_this.sex, _this.majText, _this.minText);
          }
        });
      }
    });
  },
  methods: {
    //   点击上面的热门、最新等选项
    majActive(index, name) {
      console.log(index, name);
      this.majIndex = index;
      this.changeText();
      this.changeType(this.sex, this.majText, this.minText);
    },
    // 点击热门的类型 或者最新的类型
    minActive(index, name) {
      console.log(index, name);
      this.minIndex = index;
      this.changeText();
      this.minText = name;
      this.changeType(this.sex, this.majText, this.minText);
    },
    // 点击事件触发方法
    changeType(sex, maj, min) {
      this.isLoading = true;
      console.log(sex, maj, min, this.text);
      // 分类的分类
      this.$axios
        .get(
          `/category-info?gender=${sex}&type=${maj}&major=${this.text}&minor=${min}&start=0&limit=20`
        )
        .then((d) => {
          console.log(d);
          this.AllList = d.data.books;
          if (this.AllList == d.data.books) {
            this.isLoading = false;
          }
        });
    },
    changeText() {
      if (this.majIndex == 0) {
        this.majText = "new";
      } else if (this.majIndex == 1) {
        this.majText = "hot";
      } else if (this.majIndex == 2) {
        this.majText = "over";
      }
    },
  },
};
</script>

<style lang="less" scoped>
ul > li.red {
  color: #fff;
  font-size: 16px;
  background: red;
  border-radius: 6px;
}
.back {
  margin: 4vw;
  display: flex;
  align-items: center;

  .title {
    color: black;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-left: 40vw;
  }
  a {
    img {
      width: 6vw;
      height: 6vw;
      display: flex;
      align-items: center;
    }
  }
}
.detailsCon {
  margin: 4vw;
  ul {
    display: flex;
    margin-top: 4vw;
    flex-wrap: wrap;
    li {
      margin-left: 2vw;
      margin: 1vw 0vw;
      font-size: 14px;
      padding: 0vw 1vw;
    }
  }
}
.newAll {
  margin: 0vw 4vw;
  .newItem {
    border-bottom: 1px solid rgb(240, 241, 242);
    padding: 4vw 0vw 4vw 0vw;
    a {
      display: flex;

      .itemleft {
        img {
          width: 22vw;
          height: 28vw;
        }
      }
      .itemright {
        margin-left: 1vw;
        .itemname {
          font-weight: bold;
          font-size: 18px;
          color: black;
        }
        .synopsis {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          color: rgb(164, 155, 163);
          font-size: 14px;
          margin: 3vw 0vw;
        }
        .bom {
          display: flex;
          justify-content: space-between;
          .bom_left {
            img {
              width: 4vw;
              height: 4vw;
              vertical-align: middle;
            }
            .author {
              display: inline-block;
              color: rgb(164, 155, 163);
              font-size: 14px;
            }
          }
          .bom_right {
            .type {
              font-size: 12px;
              color: rgb(145, 150, 158);
              border: 1px solid rgb(226, 228, 230);
              margin-right: 1vw;
            }
            .isOk {
              font-size: 12px;
              color: rgb(237, 66, 75);
              border: 1px solid rgb(250, 203, 206);
              margin-right: 1vw;
            }
            .textNum {
              font-size: 12px;
              color: rgb(66, 132, 237);
              border: 1px solid rgb(203, 222, 250);
            }
          }
        }
      }
    }
  }
}
// 加载样式
.loadingCss {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -21px;
  margin-top: -21px;

  #preloader_6 {
    margin: 0 auto;
    position: relative;
    width: 42px;
    height: 42px;
    animation: preloader_6 5s infinite linear;
  }

  #preloader_6 span {
    width: 20px;
    height: 20px;
    position: absolute;
    background: red;
    display: block;
    animation: preloader_6_span 1s infinite linear;
  }

  #preloader_6 span:nth-child(1) {
    background: #2ecc71;
  }

  #preloader_6 span:nth-child(2) {
    left: 22px;
    background: #9b59b6;
    animation-delay: 0.2s;
  }

  #preloader_6 span:nth-child(3) {
    top: 22px;
    background: #3498db;
    animation-delay: 0.4s;
  }

  #preloader_6 span:nth-child(4) {
    top: 22px;
    left: 22px;
    background: #f1c40f;
    animation-delay: 0.6s;
  }

  @keyframes preloader_6 {
    from {
      -ms-transform: rotate(0deg);
    }

    to {
      -ms-transform: rotate(360deg);
    }
  }

  @keyframes preloader_6_span {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(0.5);
    }

    100% {
      transform: scale(1);
    }
  }
}
</style>